import React from 'react'
import { Input, Select, DatePicker, Space, Button, Row, Col } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import './index.scss'

const { Option } = Select
const { RangePicker } = DatePicker;

export default function Search() {
    return (
        <div className='after-search'>
            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="借款编号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="姓名/手机号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="合同号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={3}>
                    <div>
                        <Select
                            showSearch
                            placeholder="贷款类型"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="tom">Tom</Option>
                        </Select>
                    </div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </div>
                </Col>
                <Col className="gutter-row" span={2}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                            查询
                        </Button>
                    </div>
                </Col>
            </Row>
        </div>
    )
}
